<template>
	<view class="custom-page">
		<view class="main-page flex-col">
			<view class="loading-down flex-col c-666">
				<text class="title">注册</text>
				<text>创建新账号</text>
			</view>
			<view class="form-main">
				<uv-form labelPosition="top" labelWidth="auto" errorType="toast" :model="userInfo" :rules="rules"
					ref="uForm">
					<view class="form-item loading-left">
						<uv-icon class="icon" name="phone" size="40rpx"></uv-icon>
						<uv-form-item prop="phone">
							<view class="input-box">
								<input type="number" placeholder-class="placeholders" v-model="userInfo.phone"
									placeholder="手机号" />
							</view>
							<view>
								<uv-text type="primary" :text="tips" @tap="getCode"></uv-text>	
								<uv-code ref="uCode" startText="获取验证码" @change="codeChange"
									seconds="60" changeText="Xs" />
							</view>
						</uv-form-item>
					</view>
					<view class="form-item loading-left flex-row align-center">
						<uv-icon class="icon" name="chat" size="40rpx"></uv-icon>
						<uv-form-item prop="code">
							<view class="input-box">
								<input placeholder-class="placeholders" v-model="userInfo.code"
									placeholder="验证码" />
							</view>
						</uv-form-item>
					</view>
					<view class="form-item loading-left flex-row align-center">
						<uv-icon class="icon" name="account" size="40rpx"></uv-icon>
						<uv-form-item prop="nickname">
							<view class="input-box">
								<input placeholder-class="placeholders" v-model="userInfo.nickname"
									placeholder="昵称" />
							</view>
						</uv-form-item>
					</view>
					<view class="form-item loading-left flex-row align-center">
						<uv-icon class="icon" name="lock" size="40rpx"></uv-icon>
						<uv-form-item prop="password">
							<view class="input-box">
								<input :password="!isShow" placeholder-class="placeholders" v-model="userInfo.password"
									placeholder="密码" />
							</view>
						</uv-form-item>
						<view class="lock-icon">
							<uv-icon :name="isShow?'eye':'eye-off-outline'" size="40rpx" @click="isShow=!isShow"></uv-icon>
						</view>
					</view>
					<view class="form-item loading-left flex-row align-center">
						<uv-icon class="icon" name="lock-open" size="40rpx"></uv-icon>
						<uv-form-item prop="aginPassword">
							<view class="input-box">
								<input :password="!isShow1" placeholder-class="placeholders" v-model="userInfo.aginPassword"
									placeholder="再次输入密码" />
							</view>
						</uv-form-item>
						<view class="lock-icon">
							<uv-icon :name="isShow1?'eye':'eye-off-outline'" size="40rpx" @click="isShow1=!isShow1"></uv-icon>
						</view>
					</view>
					<view class="form-item loading-left flex-row align-center">
						<uv-icon class="icon" name="share" size="40rpx"></uv-icon>
						<uv-form-item>
							<view class="input-box">
								<input placeholder-class="placeholders" v-model="userInfo.inviteCode"
									placeholder="InviteCode" />
							</view>
						</uv-form-item>
					</view>
				</uv-form>	
			</view>
			<view class="forget-pwd">注册即表示您同意我们的使用条款</view>
			<view class="loginBth loading-up" @click="sumbit">
				<uv-icon name="arrow-rightward" color="#fff" size="48rpx" bold></uv-icon>
			</view>
			<view class="register-link text-center m-15 loading-up">
				已有账户? <text @click="toLogin">登录</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {encryptText} from "@/utils/cryptoJs.js"
	export default {
		data() {
			return {
				tips: "",
				isShow:false,
				isShow1:false,
				inviteShow:false,
				loginBtnActive: false,
				userInfo: {
					phone: "",
					code: "",
					nickname: "",
					password: "",
					aginPassword: "",
					inviteCode: ""
				},
			};
		},
		computed: {
			rules() {
				return {
					'code':{
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
					'nickname': {
						type: 'string',
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					},
					'phone': [{
							type: 'string',
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (!uni.$uv.test.mobile(value)) {
									callback(new Error('请输入正确手机号'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
					'password': [{
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}, {
						type: 'string',
						min: 6,
						required: true,
						message: '最低六位密码',
						trigger: ['blur', 'change']
					}],
					'aginPassword': [{
							required: true,
							message: '请再次输入密码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (value !== this.userInfo.password) {
									callback(new Error('两次密码不一致'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
				}
			}
		},
		onLoad(opt) {
			if(opt.inviteCode){
				this.userInfo.inviteCode = opt.inviteCode
			}
		},
		methods: {
			sumbit() {
				// 使用变量控制动画状态
				this.loginBtnActive = true;
				this.$refs.uForm.validate().then(async (success) => {
					// console.log(success)
					const {
						data: res
					} = await this.$api.post('/app/register', this.userInfo)
					uni.showToast({
						icon:"success",
						title:"注册成功！",
						duration:1000
					})
					setTimeout(()=>{
						uni.reLaunch({
							url: "/pages/down/down"
						})
					},1000)
					this.loginBtnActive = false;
				}).catch(err=>{
					this.loginBtnActive = false;
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$refs.uForm.validateField('phone', async (err) =>{
						if (err.length > 0) {
							return uni.$uv.toast('请输入手机号');
						} else {
							const phoneJosn = {
								phone:this.userInfo.phone
							}
							// 后端请求验证码
							uni.showLoading({
								title: "发送中"
							})
							const {
								data: res
							} = await this.$api.post('/app/sendRegisterCaptcha',{data:encryptText(JSON.stringify(phoneJosn))})
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$uv.toast('已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}
					})		
				} else {
					uni.$u.toast('倒计时结束再获取');
				}
			},
			toLogin(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	.custom-page{
		padding-top: 0;
	}
	.main-page {
		padding: 0 64rpx;
		box-sizing: border-box;
		flex: 1;
        padding-top: 182rpx;
		.title {
			font-weight: 500;
			font-size: 44rpx;
			color: #181D2D;
			text-align: left;
			font-style: normal;
		}

		.form-main {
			width: 100%;
			box-sizing: border-box;
            margin-top: 100rpx;
			.form-item {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				border-bottom: 1rpx solid #C1C7D0;
				gap: 18rpx;
				width: 100%;
				display: flex;
				.icon::after{
					content: "";
					width: 2rpx;
					height: 40rpx;
					background-color: #C1C7D0;
					margin-left: 18rpx;
				}
			}
			.remember-forget {
				margin-bottom: 30rpx;
				.remember-me {
					font-size: 26rpx;
					.checkbox {
						transform: scale(0.7);
						margin-right: 5rpx;
					}
				}
			}
		}
	}

	// .agreement-main {
	// 	width: 100%;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	flex-wrap: wrap;
	// 	font-size: 28rpx;
	// 	color: #4B5563;
 //        margin: 100rpx 0;
	// 	.text-link {
	// 		color: #4F46E5;
	// 	}
	// 	.checkbox {
	// 		transform: scale(0.7);
	// 		margin-right: 5rpx;
	// 	}
	// }
	.forget-pwd {
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #324A59;
	}
	.register-link{
		font-size: 28rpx;
		color: #AAAAAA;
		line-height: 54rpx;
		text-align: left;
		margin-top: auto;
		margin-bottom: 50rpx;
		text{
			color:#324A59;
		}
	}
	.loginBth {
		width: 128rpx;
		height: 128rpx;
		background: #494BB2;
		border-radius: 50%;
		margin-left: auto;
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.input-box{
		flex: 1;
		display: flex;
		align-items: center;
		input{
			flex: 1;
		}
	}
	.lock-icon{
		margin-left: auto;
	}
</style>